<template>
	<view class="guoqing-bot tn-bg-gray--light">
		<view v-if="workflow_id" class="chunk tn-flex tn-flex-direction-column tn-margin-bottom-sm">
			<tn-form :model="model" ref="form" :errorType="errorType" :labelPosition="labelPosition" :labelWidth="labelWidth" :labelAlign="labelAlign">
			  <tn-form-item label="谥号" prop="name" :required="true" :labelPosition="labelPosition" :labelAlign="labelAlign">
			    <tn-input v-model="model.name" type="text" placeholder="请输入" :border="border"></tn-input>
			  </tn-form-item>
			  <tn-form-item label="性别" prop="sex" :required="true" :labelPosition="labelPosition" :labelAlign="labelAlign">
			    <tn-radio-group v-model="model.sex" width="auto" :wrap="false" @change="radioGroupChange">
			      <tn-radio v-for="(item, index) in radioList" :key="index" :name="item.name">{{ item.name }}</tn-radio>
			    </tn-radio-group>
			  </tn-form-item>
				<tn-form-item label="出生日期" prop="createTime" :required="true" :labelPosition="labelPosition" :labelAlign="labelAlign">
					<tn-input v-model="model.createTime" disabled="true" @click="createTimePickerShow = true"  />
				</tn-form-item>
			</tn-form>
			<view class="submit-btn">
				<tn-button shape="round" :backgroundColor="loading ? '#1d254187' : '#1D2541'" fontColor="#ffffff" width="100%" shadow size="lg" :loading="loading" :disabled="loading" @click="submitManager">
					提 交
				</tn-button>
			</view>
		</view>
		<view  v-for="item in resList"  class="chunk tn-flex tn-flex-direction-column tn-margin-bottom-sm">
			<view class="content">
				<view>
					<view class="name tn-text-xl tn-flex">
						<view v-for="str in item.name" class="name-bg">
							{{str}}
						</view>
					</view>
					<view class="wuxing tn-border-solid-bottom tn-padding-xs">
						五 行: {{ item.wuxing }}
					</view>
					<view class="yuyi tn-border-solid-bottom tn-padding-xs">
						寓 意: {{ item.yuyi }}
					</view>
				</view>
			</view>
		</view>
		
		<view v-if="loading" class="cover-mask">
			<tn-loading size="86"></tn-loading>
		</view>
		<!-- 出生日期选择器 -->
		<tn-picker
		  v-model="createTimePickerShow"
		  mode="time"
		  :params="params"
			:defaultTime="defaultTime"
		  @cancel="cancelPicker"
		  @confirm="confirmPicker"
		>
		</tn-picker>
	</view>
</template>

<script>
	import { getWorkflowRun } from '@/api/coze.js'
	import wxUrlConfig from '@/common/config.js'
	import { parseTime, parsePlatformTime } from '@/common/utils.js'
	export default {
		data() {
			return {
				labelPosition: 'left',
				labelAlign: 'right',
				labelWidth: 140,
				border: false,
				radioList:[
				  {
				    name: '男',
				    disabled: false
				  },
				  {
				    name: '女',
				    disabled: false
				  }
				],
				model: {
				  name: '',
				  sex: '男',
				  createTime: ''
				},
				rules: {
				  name: [
				    {
				      required: true,
				      message: '请输入姓氏',
				      trigger: 'blur'
				    }
				  ],
				  sex: [
				  	{
				  		required: true,
				  		message: '请选择性别',
				  		trigger: 'change'
				  	}
				  ]
				},
				createTimePickerShow: false,
				params: {
					year: true,
					month: true,
					day: true,
					hour: true,
					minute: true,
					second: true,
					province: true,
					city: true,
					area: true,
					timestamp: true
				},
				resList: [], // 结果集
				defaultTime: '',
				loading: false,
				workflow_id: null
			}
		},
		onLoad(params) {
			this.workflow_id = params.workflow_id
			const platform = uni.getSystemInfoSync().platform
			if (platform === 'ios') {
				this.defaultTime = parseTime(new Date(), '{y}/{m}/{d} {h}:{i}:{s}')
			} else if (platform === 'android') {
				this.defaultTime = parseTime(new Date(), '{y}-{m}-{d} {h}:{i}:{s}')
			}
		},
		methods: {
			 // 性别
			radioGroupChange(event) {
				this.model.sex = event
			},
			cancelPicker() {
				
			},
			confirmPicker(event) {
				console.log('event', event)
				let time = `${event['year']}-${event['month']}-${event['day']} ${event['hour']}:${event['minute']}:${event['second']}`
				time = parsePlatformTime(time)
				this.model.createTime = time
			},
			submitManager() {
				if(!this.model.name){
					uni.showToast({
						icon: 'none',
						title: '请填写姓氏',
						duration: 2000
					});
					return 
				}
				if(!this.model.createTime){
					uni.showToast({
						icon: 'none',
						title: '请填写出生日期',
						duration: 2000
					});
					return 
				}
				this.loading = true
				this.getWorkflowRunInterface()
			},
			// 调用工作流接口
			getWorkflowRunInterface() {
				const params = {
					workflow_id: this.workflow_id,
					parameters: {
						xingshi: this.model.name,
						sex: this.model.sex,
						chushengshijian: this.model.createTime
					}
				}
				getWorkflowRun(params).then(res => {
					this.loading = false
					if(res && res.success) {
						let data = JSON.parse(res.data)
						this.resList = data?.output || []
					}
				})
			},
		}
		
	}
</script>

<style lang="scss" scoped>
	.guoqing-bot {
		min-height: 100vh;
		padding: 20rpx 30rpx;
		margin-bottom: env(safe-area-inset-bottom);
	}
	.chunk {
		padding: 20rpx 20rpx;
		border-radius: 20rpx;
		background-color: #fff;
		box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
		.title {
			font-size: 36rpx;
			font-weight: 600;
			margin-bottom: 10rpx;
		}
		.name-bg {
			background-image: url('http://qiniu.yuanlj.top/material_library/%E6%96%87%E5%AD%97%E6%A0%BC.png');
			background-size: 100% 100%;
			width: 140rpx;
			height: 140rpx;
			text-align: center;
			line-height: 140rpx;
			font-size: 32px;
		}
	}
	.submit-btn {
		width: 100%;
	}
	.cover-mask {
		position: fixed;
		top: 0;
		left: 0;
		height: 100vh;
		width: 100vw;
		background-color: rgba(0, 0, 0, 0.7);
		display: flex;
		align-items: center;
		justify-content: center;
		z-index: 99999999;
	}
	.red-bg-color {
		background-color: red;
	}
	.blue-bg-color {
		background-color: blue;
	}
	.white-bg-color {
		background-color: #fff;
	}
</style>